<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>美图证件照</title>
    <link rel="stylesheet" href="./css/huacommon.css" />
    <link rel="stylesheet" href="./css/huazhengjianzhao.css" />
    <style></style>
  </head>
  <body>
    <div class="back" onclick="window.history.back()">
      <img src="./svg/返回.svg" alt="" />
    </div>
    <!-- Header -->
    <div class="header">
      <h1>美图证件照</h1>
    </div>

    <!-- Banner -->
    <div class="banner">
      <img src="./imgs/img.png" alt="Banner" />
      <p class="subtitle">精致妆容 | 多样发型</p>
    </div>

    <!-- Navigation -->
    <div class="nav">
      <a href="#" class="active">普通寸照</a>
      <a href="#">近期热门</a>
      <a href="#">财务会计</a>
      <a href="#">结婚照</a>
      <a href="#">形象照</a>
    </div>

    <!-- Main Content -->
    <div class="content" style="margin-bottom: 40px">
      <div class="card">
        <img src="./imgs/一寸照.png" alt="一寸照" />
        <div class="info">
          <h3>一寸照</h3>
          <p>25x35mm | 100k-200k</p>
        </div>
      </div>

      <div class="card">
        <img src="./imgs/二寸照.png" alt="二寸照" />
        <div class="info">
          <h3>二寸照</h3>
          <p>35x49mm | 100k-200k</p>
        </div>
      </div>

      <div class="card">
        <img src="./imgs/图标=自定义尺寸.png" alt="自定义尺寸" />
        <div class="info">
          <h3>自定义尺寸</h3>
          <p>个性化定制</p>
        </div>
      </div>
      <div class="card" onclick="window.location.href='./custom.html'">
        <img src="./imgs/ai.png" alt="自定义尺寸" />
        <div class="info">
          <h3>AI照相馆</h3>
          <p>在线制作面部档案。生成多样写真</p>
        </div>
      </div>
      <div class="card">
        <img src="./imgs/结婚照.png" alt="自定义尺寸" />
        <div class="info">
          <h3>结婚登记照</h3>
          <p>53x35mm | 100k-1000k</p>
        </div>
      </div>
      <div class="card">
        <img src="./imgs/foundation office-blue@3x.png" alt="自定义尺寸" />
        <div class="info">
          <h3>一寸工作证</h3>
          <p>25x35mm | 100k-200k</p>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <div class="footer-nav" id="footer-nav">
      <!-- json 渲染 -->
      <!-- <a href="#" class="active">首页</a>
      <a href="#">小工具</a>
      <a href="#">证件照精修</a>
      <a href="./me.html">我的</a> -->
    </div>
    <script src="./js/zhengjianzhao.js"></script>
  </body>
</html>
